<script>
export default {
  name: "home",
  data() {
    return {
      mockData: '',
      details:'',
      lang: [
        {
          label:'简体中文',
          locale:'zh-CN'
        },
        {
          label:'English',
          locale:'en-US'
        }
      ],
      date: '',
      locale: localStorage.getItem('locale')
    };
  },
  watch:{
    locale(){
      this.$i18n.locale = this.locale
      localStorage.setItem('locale',this.locale)
    }
  },
  created() {
    this.$api.getList({id:'111'}).then(res=>{
      this.mockData = res.data;
    });
    this.$api.getDetails({data:'111',config:'sdasdas'}).then(res=>{
      this.details = res.data;
      console.log(this.details)
    })
  }
};

// <i18n>
//   zh-CN: 
//     test: "测试文字，再加点。。。"
//     sentence: "如果你喜欢{food},我就带你去{conutry}。"
//     food: "米饭"
//     country: "中国"
//   en-US: 
//     test: "some words to test language..."
//     sentence: "If you like {food},I will take to {conutry}。"
//     food: "rice"
//     country: "China"
// </i18n> 
</script>



<template>
  <div>
    <p>{{$t('title')}}</p>
    <img src="../../../logo.png" alt>
    <table>
      <caption>{{$t('caption')}}</caption>
      <thead>
        <tr>
          <th v-for="(value,key,i) in mockData[0]" :key="i+key" :width="key=='cimments'?'50%':'10%'">{{key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in mockData" :key="index">
          <td v-for="(value,key,i) in item" :key="i">{{value}}</td>
        </tr>
      </tbody>
    </table>
    <el-select v-model="locale" :placeholder="$t('switch')">
      <el-option
        v-for="(item,index) in lang"
        :key="index"
        :label="item.label"
        :value="item.locale">
      </el-option>
    </el-select>
    <el-date-picker class="el-date-picker"
      v-model="date"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <!-- <p>{{$t('test')}}</p> -->
    <!-- <i18n path="sentence" tag="h5">
      <a href="//baidu.com" place="food">{{$t('food')}}</a>
      <a href="//baidu.com" place="conutry">{{$t('country')}}</a>
    </i18n> -->
  </div>
</template>

<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
  p {
    text-align: center;
    font-size: 40px;
    line-height: 2;
  }
  img {
    display: block;
    width: 100px;
    height: auto;
    margin: 0 auto;
  }
  table {
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    border-collapse: collapse;
    caption {
      text-align: left;
      line-height: 2;
      font-size: 20px;
      font-weight: 600;
    }
    td,th {
      border: 1px solid #ccc;
      text-align: center;
      height: 50px;
    }


  }
  .el-select  {
    display: block;
    width: 300px;
    height: 30px;
    margin: 20px auto;
  }
  .el-date-picker {
    width: 300px;
    height: 30px;
  }
  h5 {
    width: 80%;
    margin: 100px auto 0;
    text-align: right;
    font: italic normal 40px/2 "微软雅黑";
    a {
      color: red;
      text-decoration: none;
    }
  }
}
</style>
